import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import {
  Input,
  message,
  Button,
  Avatar,
  Card,
  Modal,
  Alert,
  Tag,
  Icon,
  List,
} from 'antd'
import { Trans, withI18n } from '@lingui/react'
import { UserLink } from 'components'

// const FormItem = Form.Item
const Search = Input.Search
const { Meta } = Card

@withI18n()
class WorkerModal extends PureComponent {
  state = {
    targetusers: [],
  }
  handleOk = () => {
    const { onOk, onCancel, workerSetWorkerresult } = this.props
    const { targetusers } = this.state
    if (workerSetWorkerresult) {
      onCancel()
      return
    }
    let tmptargets = []
    if (targetusers && targetusers.length > 0) {
      for (var index = 0; index < targetusers.length; index++) {
        let item = targetusers[index]
        if (item) tmptargets.push(item.objectId)
      }
      onOk({ workerobjids: tmptargets })
    } else {
      message.error('请选择需要分配的用户！')
    }
  }

  render() {
    const {
      finduser,
      confirmLoading,
      workerSetWorkerresult,
      users,
      queryuserloading,
      devices,
      selected,
      i18n,
      ...modalProps
    } = this.props
    let { targetusers } = this.state
    let count = workerSetWorkerresult ? workerSetWorkerresult.successed : 0
    return (
      <Modal
        {...modalProps}
        closable={false}
        keyboard={false}
        confirmLoading={confirmLoading}
        okText={workerSetWorkerresult ? i18n.t`Close` : i18n.t`Confirm`}
        onOk={this.handleOk}
      >
        <Alert
          style={{ marginBottom: '10px', background: '#fff' }}
          message={`${i18n.t`Choosed Devices`}:`}
          description={targetusers.map(item => {
            // const item = devices[index]
            return (
              <UserLink data={item} />
              // <Tag color="cyan" style={{ marginTop: '10px' }}>
              //   {item.DeviceName}
              // </Tag>
            )
          })}
        />
        {workerSetWorkerresult ? (
          <Alert
            style={{ marginBottom: '10px', background: '#fff' }}
            message={i18n.t`Result`}
            description={
              <div>
                {count > 0 && (
                  <Alert
                    style={{ marginTop: '5px' }}
                    message={i18n.t`Successed ${count} items`}
                  />
                )}
                {workerSetWorkerresult.wrongs.length > 0 &&
                  workerSetWorkerresult.wrongs.map(item => {
                    let Imei = item.Imei
                    return (
                      //123
                      <Alert
                        style={{ marginTop: '5px' }}
                        type="error"
                        message={
                          i18n.t`Device` +
                          ` ${item.DeviceName} ` +
                          i18n.t`Distribution failed!`
                        }
                        description={i18n.t`The user already has a device with IMEI number ${Imei}`}
                      />
                    )
                  })}
                {workerSetWorkerresult.errors.length > 0 &&
                  workerSetWorkerresult.errors.map(item => {
                    return (
                      <Alert
                        style={{ marginTop: '5px' }}
                        type="warning"
                        showIcon
                        message={
                          i18n.t`Device` +
                          ` ${item.DeviceName} ` +
                          i18n.t`Distribution failed!`
                        }
                        description={i18n.t`Server encounters unknown problems`}
                      />
                    )
                  })}
              </div>
            }
          />
        ) : (
          <Alert
            style={{ marginBottom: '10px', background: '#fff' }}
            message={
              <div style={{ display: 'inline-block' }}>
                <Trans>Copy Devices To</Trans>：
              </div>
            }
            description={
              <div>
                <Search
                  style={{ marginTop: '10px' }}
                  placeholder={i18n.t`Enter the user's name`}
                  onSearch={value => {
                    finduser(value)
                  }}
                  // prefix={<Icon type="user"></Icon>}
                  enterButton
                />
                <List
                  style={{ marginTop: '5px' }}
                  grid={{ gutter: 16, xs: 1, sm: 2, md: 2, lg: 2 }}
                  loading={queryuserloading}
                  dataSource={users}
                  renderItem={item => {
                    let choosed =
                      targetusers.findIndex(_ => _.objectId == item.objectId) >=
                      0
                    return (
                      <List.Item>
                        <Card
                          style={{ borderColor: choosed ? '#8fc9fb' : '#fff' }}
                          actions={[
                            <Button
                              type={choosed ? 'primary' : 'default'}
                              onClick={e => {
                                if (choosed) {
                                  let targetindex = targetusers.findIndex(
                                    _ => _.objectId == item.objectId
                                  )
                                  let tmptargetusers = []
                                  for (
                                    let ind = 0;
                                    ind < targetusers.length;
                                    ind++
                                  ) {
                                    if (ind != targetindex) {
                                      tmptargetusers.push(targetusers[ind])
                                    }
                                  }
                                  this.setState({ targetusers: tmptargetusers })
                                } else {
                                  targetusers.push(item)
                                  this.setState({
                                    targetusers: [...targetusers],
                                  })
                                }
                              }}
                            >
                              <Trans>Select</Trans>
                            </Button>,
                          ]}
                        >
                          {
                            <Meta
                              avatar={<Avatar src={item.avatar} />}
                              title={item.username}
                              description={item.role}
                            />
                          }
                        </Card>
                      </List.Item>
                    )
                  }}
                />
              </div>
            }
          />
        )}
      </Modal>
    )
  }
}

WorkerModal.propTypes = {
  type: PropTypes.string,
  item: PropTypes.object,
  onOk: PropTypes.func,
}

export default WorkerModal
